<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.4.6 (461470)"/><meta name="altitude" content="6.764629364013672"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2020-10-25 15:33:04 +0000"/><meta name="latitude" content="31.37547302246094"/><meta name="longitude" content="121.4935746617062"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-11-01 16:31:23 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>day11：vue项目 - 分类 + 个人中心</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000; margin-top: 14px;">一、详情页分享 + 收藏</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/share-sheet" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">分享组件</a> 添加分享效果</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">点击收藏，添加收藏商品到数据，完善收藏效果</p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、分类</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/sidebar" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">侧边导航组件</a> ，渲染分类字段</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/grid" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">宫格组件</a> 渲染分类下的品牌信息</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">需要后台接口的配合，根据分类搜索品牌信息</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">注意信息的去重处理</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">点击分类下的某一品牌，跳转到搜索列表页面，搜索逻辑为 分类，品牌 搜索</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">设置品牌搜索页面的头部信息为：<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">xx分类-xx品牌</code> 字样</p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、个人中心</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">设置路由守卫，检测用户登录状态，未登录需要跳转到登录</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">登录成功，读取个人账户信息，渲染个人信息</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">头像，用户名</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">订单状态选项</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/cell" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">单元格组件</a> 渲染用户信息</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/uploader" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">文件上传组件</a> 更新头像信息，并保存到数据库</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">头部区域添加 设置 按钮，点击跳转到设置页面</p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">四、设置页面</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/form" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">表单组件</a> ，收集用户需要修改的信息，提交到后台接口，进行修改</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">准备注销按钮，点击删除各种登录信息，实现注销功能</p>
</li>
</ol>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%23%20%E4%B8%80%E3%80%81%E8%AF%A6%E6%83%85%E9%A1%B5%E5%88%86%E4%BA%AB%20%2B%20%E6%94%B6%E8%97%8F%0A1.%20%E4%BD%BF%E7%94%A8%20%5B%E5%88%86%E4%BA%AB%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fshare-sheet)%20%E6%B7%BB%E5%8A%A0%E5%88%86%E4%BA%AB%E6%95%88%E6%9E%9C%0A%0A2.%20%E7%82%B9%E5%87%BB%E6%94%B6%E8%97%8F%EF%BC%8C%E6%B7%BB%E5%8A%A0%E6%94%B6%E8%97%8F%E5%95%86%E5%93%81%E5%88%B0%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%AE%8C%E5%96%84%E6%94%B6%E8%97%8F%E6%95%88%E6%9E%9C%0A%0A%0A%23%20%E4%BA%8C%E3%80%81%E5%88%86%E7%B1%BB%0A1.%20%E4%BD%BF%E7%94%A8%20%5B%E4%BE%A7%E8%BE%B9%E5%AF%BC%E8%88%AA%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fsidebar)%20%EF%BC%8C%E6%B8%B2%E6%9F%93%E5%88%86%E7%B1%BB%E5%AD%97%E6%AE%B5%0A%0A2.%20%E4%BD%BF%E7%94%A8%20%5B%E5%AE%AB%E6%A0%BC%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fgrid)%20%E6%B8%B2%E6%9F%93%E5%88%86%E7%B1%BB%E4%B8%8B%E7%9A%84%E5%93%81%E7%89%8C%E4%BF%A1%E6%81%AF%0A%20%20%20%20-%20%E9%9C%80%E8%A6%81%E5%90%8E%E5%8F%B0%E6%8E%A5%E5%8F%A3%E7%9A%84%E9%85%8D%E5%90%88%EF%BC%8C%E6%A0%B9%E6%8D%AE%E5%88%86%E7%B1%BB%E6%90%9C%E7%B4%A2%E5%93%81%E7%89%8C%E4%BF%A1%E6%81%AF%0A%20%20%20%20-%20%E6%B3%A8%E6%84%8F%E4%BF%A1%E6%81%AF%E7%9A%84%E5%8E%BB%E9%87%8D%E5%A4%84%E7%90%86%0A%0A3.%20%E7%82%B9%E5%87%BB%E5%88%86%E7%B1%BB%E4%B8%8B%E7%9A%84%E6%9F%90%E4%B8%80%E5%93%81%E7%89%8C%EF%BC%8C%E8%B7%B3%E8%BD%AC%E5%88%B0%E6%90%9C%E7%B4%A2%E5%88%97%E8%A1%A8%E9%A1%B5%E9%9D%A2%EF%BC%8C%E6%90%9C%E7%B4%A2%E9%80%BB%E8%BE%91%E4%B8%BA%20%E5%88%86%E7%B1%BB%EF%BC%8C%E5%93%81%E7%89%8C%20%E6%90%9C%E7%B4%A2%0A%0A4.%20%E8%AE%BE%E7%BD%AE%E5%93%81%E7%89%8C%E6%90%9C%E7%B4%A2%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%A4%B4%E9%83%A8%E4%BF%A1%E6%81%AF%E4%B8%BA%EF%BC%9A%60xx%E5%88%86%E7%B1%BB-xx%E5%93%81%E7%89%8C%60%20%E5%AD%97%E6%A0%B7%0A%0A%0A%23%20%E4%B8%89%E3%80%81%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83%0A1.%20%E8%AE%BE%E7%BD%AE%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB%EF%BC%8C%E6%A3%80%E6%B5%8B%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95%E7%8A%B6%E6%80%81%EF%BC%8C%E6%9C%AA%E7%99%BB%E5%BD%95%E9%9C%80%E8%A6%81%E8%B7%B3%E8%BD%AC%E5%88%B0%E7%99%BB%E5%BD%95%0A%0A2.%20%E7%99%BB%E5%BD%95%E6%88%90%E5%8A%9F%EF%BC%8C%E8%AF%BB%E5%8F%96%E4%B8%AA%E4%BA%BA%E8%B4%A6%E6%88%B7%E4%BF%A1%E6%81%AF%EF%BC%8C%E6%B8%B2%E6%9F%93%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%0A%20%20%20%20-%20%E5%A4%B4%E5%83%8F%EF%BC%8C%E7%94%A8%E6%88%B7%E5%90%8D%0A%20%20%20%20-%20%E8%AE%A2%E5%8D%95%E7%8A%B6%E6%80%81%E9%80%89%E9%A1%B9%0A%20%20%20%20-%20%E4%BD%BF%E7%94%A8%20%5B%E5%8D%95%E5%85%83%E6%A0%BC%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fcell)%20%E6%B8%B2%E6%9F%93%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF%0A%0A3.%20%E4%BD%BF%E7%94%A8%20%5B%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fuploader)%20%E6%9B%B4%E6%96%B0%E5%A4%B4%E5%83%8F%E4%BF%A1%E6%81%AF%EF%BC%8C%E5%B9%B6%E4%BF%9D%E5%AD%98%E5%88%B0%E6%95%B0%E6%8D%AE%E5%BA%93%0A%0A4.%20%E5%A4%B4%E9%83%A8%E5%8C%BA%E5%9F%9F%E6%B7%BB%E5%8A%A0%20%E8%AE%BE%E7%BD%AE%20%E6%8C%89%E9%92%AE%EF%BC%8C%E7%82%B9%E5%87%BB%E8%B7%B3%E8%BD%AC%E5%88%B0%E8%AE%BE%E7%BD%AE%E9%A1%B5%E9%9D%A2%0A%0A%0A%23%20%E5%9B%9B%E3%80%81%E8%AE%BE%E7%BD%AE%E9%A1%B5%E9%9D%A2%0A1.%20%E4%BD%BF%E7%94%A8%20%5B%E8%A1%A8%E5%8D%95%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fform)%20%EF%BC%8C%E6%94%B6%E9%9B%86%E7%94%A8%E6%88%B7%E9%9C%80%E8%A6%81%E4%BF%AE%E6%94%B9%E7%9A%84%E4%BF%A1%E6%81%AF%EF%BC%8C%E6%8F%90%E4%BA%A4%E5%88%B0%E5%90%8E%E5%8F%B0%E6%8E%A5%E5%8F%A3%EF%BC%8C%E8%BF%9B%E8%A1%8C%E4%BF%AE%E6%94%B9%0A%0A2.%20%E5%87%86%E5%A4%87%E6%B3%A8%E9%94%80%E6%8C%89%E9%92%AE%EF%BC%8C%E7%82%B9%E5%87%BB%E5%88%A0%E9%99%A4%E5%90%84%E7%A7%8D%E7%99%BB%E5%BD%95%E4%BF%A1%E6%81%AF%EF%BC%8C%E5%AE%9E%E7%8E%B0%E6%B3%A8%E9%94%80%E5%8A%9F%E8%83%BD%0A%0A%0A%0A%0A%0A%0A%0A</center></body></html>